<template>
    <el-select
        v-model="modelValue"
        @change="onChange"
        :multiple="!!props.multiple"
        :disabled="props.disabled || props.readonly"
        :placeholder="props.placeholder"
        :clearable="true"
    >
        <el-option
            v-for="item in props.options"
            :value="item.value"
            :label="item.label"
            :disabled="props.disabled || props.readonly"
        />
    </el-select>
</template>

<script setup lang="ts">
import {ElSelect, ElOption} from 'element-plus';
import {defineModel, defineProps} from 'vue';

const modelValue = defineModel<string | Array<string>>();

const emits = defineEmits(['change', 'update:modelValue']);
const props = defineProps({
    options: {
        type: Array<{value: string; label: string}>,
        default: () => []
    },
    multiple: Boolean,
    placeholder: String,
    disabled: Boolean,
    readonly: Boolean
});

const onChange = (value) => {
    modelValue.value = value;
    emits('update:modelValue', value);
    emits('change', value);
};
</script>
